<template>
  <div>
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="机组" prop="type">
        <el-select
          size="mini"
          v-model="queryParams.type"
          placeholder="请选择类型"
          clearable
        >
          <!-- <el-option
            v-for="dict in dict.type.gzp_safe_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          /> -->
          <el-option
            v-for="dict in options"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >

        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >新增</el-button
        >
      </el-form-item>
    </el-form>

    <CommonTable
      :tableData="tableData"
      :isEdit="false"
      @handleEdit="handleEdit"
    ></CommonTable>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 修改弹出框 -->
    <el-dialog
      :title="addOrEdit ? '编辑' : '新增'"
      :visible.sync="dialogVisible"
      width="70%"
      v-if="dialogVisible"
    >
      <el-form v-if="!addOrEdit" :inline="true">
        <el-form-item label="日期">
          <el-date-picker
            v-model="addDate"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            size="mini"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="机组">
          <el-select
            v-model="queryParams.type"
            placeholder="请选择"
            size="mini"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <!--  -->
      <!-- <CommonTable :tableData="changeData" :isEdit="true"></CommonTable> -->
      <CommonFrom :row="changeData" :machine="queryParams.type"></CommonFrom>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import CommonTable from './CommonTable.vue'
import CommonFrom from './CommonFrom.vue'
export default {
  components: { CommonTable, CommonFrom },
  data () {
    return {
      tableData: [{ date: '一月一日', address: '浙江杭州' }],
      // 控制弹出框
      dialogVisible: false,
      // 点击“编辑”，保存当前行数据
      changeData: null,
      // 当前弹出框的状态：0 新增，1 编辑
      addOrEdit: 0,
      // 弹出框的时间选择器
      addDate: null,
      // 弹出框的机组选择器
      addSelect: null,
      options: [
        { label: '#1机组', value: 1 },
        { label: '#2机组', value: 2 }
      ],
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        type: 1
      }
    }
  },
  methods: {
    // 子组件的编辑按钮触发
    handleEdit (row) {
      console.log(row)
      this.dialogVisible = true
      // 编辑状态下清空addDate中的数据
      this.addDate = null
      this.addSelect = null
      this.changeData = JSON.parse(JSON.stringify(row))
      this.addOrEdit = 1
    },
    // 弹出框的确定按钮触发
    handleSubmit () {
      console.log(this.changeData, this.addSelect, this.addDate)
      this.dialogVisible = false
    },
    // 新增
    handleAdd () {
      this.dialogVisible = true
      // 当新增时，放入数组包裹一个空对象的数据
      this.changeData = {}

      this.addDate = this.parseTime(
        new Date() - 24 * 60 * 60 * 1000,
        '{y}-{m}-{d}'
      )
      this.addOrEdit = 0
    },
    // 查询
    getList () {
      this.loading = true
      // listWtSafeLibrary(this.queryParams).then(response => {
      //   this.WtSafeLibraryList = response.rows
      //   this.total = response.total
      //   this.loading = false
      // })
    },
    // 搜索
    handleQuery () {},
    // 处理时间
    parseTime (time, cFormat) {
      // ! arguments时伪数组，收集所有实参，箭头函数不可使用
      // ! ||后面是为了防止传递进去undefined和null
      if (arguments.length === 0 || !time) {
        return null
      }

      // ! 格式化目标格式，如果没传，默认是后面的 '{y}-{m}-{d} {h}:{i}:{s}' 格式
      const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
      let date
      if (typeof time === 'object') {
        date = time
      } else {
        if (typeof time === 'string') {
          if (/^[0-9]+$/.test(time)) {
            // support "1548221490638"
            time = parseInt(time)
          } else {
            // support safari
            // https://stackoverflow.com/questions/4310953/invalid-date-in-safari
            time = time.replace(new RegExp(/-/gm), '/')
          }
        }

        if (typeof time === 'number' && time.toString().length === 10) {
          time = time * 1000
        }
        date = new Date(time)
      }
      const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay()
      }
      const timeStr = format.replace(/{([ymdhisa])+}/g, (result, key) => {
        const value = formatObj[key]
        // Note: getDay() returns 0 on Sunday
        if (key === 'a') {
          return ['日', '一', '二', '三', '四', '五', '六'][value]
        }
        return value.toString().padStart(2, '0')
      })
      return timeStr
    }
  },
  created () {}
}
</script>

<style>
</style>
